import React, { useState, useEffect } from "react";
import "./App.scss";
import { Tabbar } from "react-vant";
import { HomeO, BarChartO, NotesO, UserO, OtherPay } from "@react-vant/icons";
import { Search, Tabs } from "react-vant";
import axios from "axios";
import { Swiper, Image } from "react-vant";
const images = [
  "https://img.yzcdn.cn/vant/apple-1.jpg",
  "https://img.yzcdn.cn/vant/apple-2.jpg",
  "https://img.yzcdn.cn/vant/apple-3.jpg",
  "https://img.yzcdn.cn/vant/apple-4.jpg",
  "https://img.yzcdn.cn/vant/apple-5.jpg",
  "https://img.yzcdn.cn/vant/apple-6.jpg",
  "https://img.yzcdn.cn/vant/apple-7.jpg",
  "https://img.yzcdn.cn/vant/apple-8.jpg",
];
export default () => {
  const [value, setValue] = useState("");
  const [list, setList] = useState<any[]>([]);
  const fetchData = async () => {
    const resp = await axios.get("/api/list");
    setList(resp.data.list);
  };
  useEffect(() => {
    fetchData();
  }, []);
  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", fontSize: "24px" }}>
        <Search
          value={value}
          onChange={setValue}
          placeholder="请输入搜索关键词"
          style={{ flex: 1 }}
        />
        <OtherPay />
      </div>
      <div className="demo-swiper">
        <Swiper autoplay={1500}>
          {images.map((image: string) => (
            <Swiper.Item key={image}>
              <Image lazyload src={image} />
            </Swiper.Item>
          ))}
        </Swiper>
      </div>
      <div style={{ marginBottom: "50px" }}>
        <div className="demo-tabs">
          <Tabs align="start" defaultActive={0}>
            {list &&
              list.map(v => (
                <Tabs.TabPane key={v.id} title={v.title}>
                  {v.children &&
                    v.children.map((v: any) => {
                      return (
                        <dl
                          style={{
                            display: "flex",
                            alignItems: "center",
                            padding: "5px 15px",
                          }}
                          key={v.id}
                        >
                          <dt>
                            <img src={v.src} alt="" />
                          </dt>
                          <dd>
                            <h3>{v.title}</h3>
                            <p>{v.word}</p>
                          </dd>
                        </dl>
                      );
                    })}
                </Tabs.TabPane>
              ))}
          </Tabs>
        </div>
      </div>
      <div className="demo-tabbar">
        <Tabbar>
          <Tabbar.Item icon={<HomeO />}>首页</Tabbar.Item>
          <Tabbar.Item icon={<BarChartO />}>分类</Tabbar.Item>
          <Tabbar.Item icon={<NotesO />}>学习</Tabbar.Item>
          <Tabbar.Item icon={<UserO />}>我的</Tabbar.Item>
        </Tabbar>
      </div>
    </div>
  );
};
